/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="analysis_field__container">
        <div class="field-box__container">
            <div class="field-box__title">
                <lang>字段类型</lang>
            </div>
            <div class="field-box__search">
                <sf-searchfield
                    v-model="searchVal"
                    class="field-box__search-field"
                    @clear="onEnterkey"
                    @trigger="onEnterkey" />
            </div>
            <div class="field-box__list">
                <div v-for="(item,index) in fieldBoxList"
                     :key="index"
                     class="field-box__item"
                     :class="{'active':fieldActiveIndex === index }"
                     @click="_selectField(item,index)">
                    <div class="field-box__img"
                         :class="item.dtype">
                    </div>
                    <div class="field-name ellipsis">
                        {{ item.name }}
                    </div>
                </div>
            </div>
        </div>
        <div v-if="fieldBoxList.length"
             class="field-detail__wrap">
            <div class="field-detail__top">
                <div class="field-detail__top-bg">
                </div>
                <div
                    class="field-detail__img"
                    :class="fieldDatailType">
                </div>
                <div class="common-top__wrap">
                    <div class="detail-top__field">
                        {{ fieldActiveObj.name }}
                    </div>
                    <div class="detail-top__content">
                        <lang>字段类型：</lang>
                        <span class="font-important"> {{ fieldActiveObj.dtype }}</span>
                        <span class="line">|</span>
                        <lang>字段值总数：</lang>
                        <span class="font-important"> {{ fieldActiveObj.total }}</span>
                    </div>
                </div>
            </div>
            <div class="field-detail__bottom">
                <div class="field-detail__nav">
                    <div v-for="(item,index) in navChartsList"
                         :key="index"
                         class="detail-nav__item"
                         :class="{'active':navChartsIndex===index}"
                         @click="_selectCharts(index)">
                        <i class="icon iconfont"
                           :class="item.icon"></i>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="bottom-detail__wrap">
                    <!-- <field-detail-content
                        :field-obj="validObj"
                        :show-bar="showBarFlag"
                    >
                    </field-detail-content> -->
                    <field-detail-content
                        :field-obj="inValidObj"
                        :show-bar="showBarFlag" />
                </div>
            </div>
        </div>
        <empty-panel
            v-else
            :title="_('没有找到对应的字段')"
            :small="true" />
    </div>
</template>
<script lang=ts>

import { Vue, Component, Prop } from 'vue-property-decorator';
import EmptyPanel from 'src/components/empty_panel.vue';
import fieldDetailContent from './field_detail_content.vue';


interface FIELDObj{
    dtype: string;
    name: string;
    notNullNumber: number;
    notNullPercent: string;
    nullNumber: number;
    nullNumberPercent: string;
    total: number;
}

@Component({
    name: 'AnalysisFieldContainer',
    components:{
        fieldDetailContent,
        EmptyPanel
    }
})
export default class AnalysisField extends Vue {
    @Prop({
        type:Object,
        default:()=>{}

    // TODO: REMOVE ANY
    }) list!: SafeAny

    // TODO: REMOVE ANY
    fieldBoxList: SafeAny[] = []

    // TODO: REMOVE ANY
    fieldCloneBoxList: SafeAny[] = []
    fieldActiveIndex = 0
    searchVal = ''
    navChartsIndex = 0
    navChartsList = [{
        name:_('柱状图'),
        icon:'iconzhuzhuangtunormal'
    }, {
        name:_('饼图'),
        icon:'iconpiechart'
    }]
    showBarFlag = true
    fieldDatailType = 'string'

    // TODO: REMOVE ANY

    get validObj () {
        return {
            title:_('有效值统计'),
            nameFirst:_('有效值个数'),
            firstNum:256,
            nameSecond:_('有效值百分比'),
            secondNum:213
        };
    }
    get inValidObj () {
        return {
            title:_('缺失值统计'),
            firstName:_('缺失值个数'),
            firstNum:this.fieldActiveObj.nullNumber,
            firstNamePercent:_('缺失值百分比'),
            firstNumPercent:`${this.fieldActiveObj.nullNumberPercent}%`,
            secondName:_('非缺失值个数'),
            secondNum:this.fieldActiveObj.notNullNumber,
            secondNamePercent:_('非缺失值百分比'),
            secondNumPercent:`${this.fieldActiveObj.notNullPercent}%`
        };
    }
    get fieldActiveObj () {
        if (this.fieldBoxList.length > 0) {
            return this.fieldBoxList[this.fieldActiveIndex];
        }
        return {};
    }

    onEnterkey () {
        let list: SafeAny[] = [];
        let nameReq = /[0-9a-zA-Z\u4e00-\u9fa5_]/;
        if (this.searchVal && nameReq.test(this.searchVal)) {
            this.fieldBoxList = this.fieldCloneBoxList;
            this.fieldActiveIndex = 0;
            for (let i = 0; i < this.fieldBoxList.length; i++) {
                let reg = new RegExp(this.searchVal, 'gi');
                if (this.fieldBoxList[i].name.match(reg)) {
                    list.push(this.fieldBoxList[i]);
                }
            }
            this.fieldBoxList = list;
        } else if (!this.searchVal) {
            this.fieldBoxList = this.fieldCloneBoxList;
        } else {
            this.fieldBoxList = [];
        }
    }

    // TODO: REMOVE ANY
    _selectCharts (index: number) {
        this.navChartsIndex = index;
        this.showBarFlag = !index;
    }

    // TODO: REMOVE ANY
    _selectField (item: FIELDObj, index: number) {
        this.fieldActiveIndex = index;
        this.fieldDatailType = item.dtype;
    }
};
</script>
<style lang="less">
    .analysis_field__container {
        display: flex;
        height: 450px;
        margin: 0 20px;
        width: 926px;
        color: #5C5C5C;
            overflow: hidden;
        .common-top__wrap{
            .detail-top__field{
                font-size: 14px;
                color: #14161A;
                font-weight: bold;
                margin-bottom: 8px;
            }
            .detail-top__content{
                .line{
                    margin:0 8px;
                }
            }
        }
        .font-important{
            color: #14161A;
        }
        .field-box__container{
            width: 200px;
            border: 1px solid #DEE3ED;
            padding: 0 8px;
            margin-right: 10px;
            .field-box__title{
                font-size: 14px;
                color: #14161A;
                font-weight: bold;
                margin-top: 10px;
            }
        }
        .field-box__search{
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 15px 0 10px 0;
            .field-box__search-field{
                width: 184px;
                .sfv-textfield_input{
                    padding-right: 28px;
                    outline: none;
                }
            }
        }
        .field-box__list{
            display: flex;
            flex-direction: column;
             align-items: center;
             height: 380px;
             overflow-y: auto;
             padding-bottom: 10px;
        }
        .field-box__item{
            border-radius: 2px;
            width: 184px;
            height: 32px;
            color: #14161A;
            line-height: 32px;
            margin-bottom: 2px;
            display: flex;
            align-items: center;
            cursor: pointer;
                padding-left: 12px;
            .field-box__img{
                width: 16px;
                height: 16px;
                margin-left:8px;
                background: url(../../../img/field/string_normal.svg) no-repeat;
                background-size:100% 100%;
                &.string{
                    background: url(../../../img/field/string_normal.svg) no-repeat;
                    background-size:100% 100%;
                }
                &.long,&.int,&.double{
                    background: url(../../../img/field/number_normal.svg) no-repeat;
                    background-size:100% 100%;
                }
                &.float{
                    background: url(../../../img/field/number_normal.svg) no-repeat;
                    background-size:100% 100%;
                }
                &.time{
                    background: url(../../../img/field/time_normal.svg) no-repeat;
                    background-size:100% 100%;
                }
            }

            &.active{
                color:#204ED9;
                background: #E8F0FF;
                .field-box__img{
                    &.string{
                        background: url(../../../img/field/string_active.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.long,&.int,&.double{
                        background: url(../../../img/field/number_active.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.float{
                        background: url(../../../img/field/number_active.svg) no-repeat;
                        background-size:100% 100%;
                    }
                    &.time{
                        background: url(../../../img/field/time_active.svg) no-repeat;
                        background-size:100% 100%;
                    }
                }
            }
            &:hover{
                background: #E8F0FF;

            }
            .field-name{
                margin-left: 8px;
            }
        }
        .field-detail__wrap{
            height: 450px;
            width: 716px;
            border: 1px solid #E0E0E0;
            border-radius: 2px;
            padding:0 8px;
            .field-detail__top{
                height: 80px;
                border-bottom:1px solid #dee3ed;
                display:flex;
                align-items:center;
                position: relative;
                .field-detail__top-bg{
                    position: absolute;
                    right: 5px;
                    top: 5px;
                    width: 90px;
                    height: 70px;
                    background:url(../../../img/analysis_field_bg.png) no-repeat;
                    background-size: 100% 100%;
                }

                .field-detail__img{
                    width: 40px;
                    height: 40px;
                    margin:0 8px;
                    &.string{
                        background: url(../../../img/field/string_big.png) no-repeat;
                        background-size:100% 100%;
                    }
                    &.long{
                        background: url(../../../img/field/number_big.png) no-repeat;
                        background-size:100% 100%;
                    }
                    &.float{
                        background: url(../../../img/field/number_big.png) no-repeat;
                        background-size:100% 100%;
                    }
                    &.time{
                        background: url(../../../img/field/time_big.png) no-repeat;
                        background-size:100% 100%;

                    }
                }


            }
            .field-detail__bottom{
                padding-top: 16px;
                .field-detail__nav{
                    display: flex;
                    justify-content: flex-end;
                    .detail-nav__item{
                        width: 84px;
                        height: 32px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color: #343A41;
                        border: 1px solid #DDDDDD;
                        border-radius: 2px 0 0 2px;
                        cursor: pointer;
                        &.active{
                            border: 1px solid #204ED9;
                            color:#204ED9;
                        }
                        .iconfont{
                            margin-right: 8px;
                        }
                    }
                }
                .bottom-detail__wrap{
                    display: flex;
                    margin: 10px 15px 0;
                }

            }
        }
    }

</style>
